<!-- 电表详情 -->
<template>
    <div class="rightContent" :style="{left: dir == 'left' ? '260px' : '0px'}">
        <div class="back" @click="back"><img src="../../assets/images/monitor/back.png" /> <label>返回</label></div>
        <div class="main">
            <div class="analysis">
                <div class="aEcharts">
                    <navigation-bar customTitle="用电量分析"> </navigation-bar>
                    <!-- <div class="mb10">用电量分析</div> -->
                    <div class="mb10">
                        <el-select v-model="value" placeholder="请选择" size="mini" style="width: 100px; margin-right: 10px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                        <el-button-group>
                            <el-button :type="currentEcharts == 'hour' ? 'primary' : 'default'" size="mini" @click="echartBtnClick('hour')"
                                >72小时</el-button
                            >
                            <el-button
                                :type="currentEcharts == 'today' ? 'primary' : 'default'"
                                size="mini"
                                @click="echartBtnClick('today')"
                                >当日</el-button
                            >
                            <el-button
                                :type="currentEcharts == 'month' ? 'primary' : 'default'"
                                size="mini"
                                @click="echartBtnClick('month')"
                                >当月</el-button
                            >
                            <el-button :type="currentEcharts == 'year' ? 'primary' : 'default'" size="mini" @click="echartBtnClick('year')"
                                >当年</el-button
                            >
                        </el-button-group>
                    </div>
                    <div class="bgF5" style="height: 240px; overflow: hidden">
                        <HourEcharts :dir="dir" v-if="currentEcharts == 'hour'"></HourEcharts>
                        <MonthEcharts :dir="dir" v-if="currentEcharts == 'month'"></MonthEcharts>
                        <TodayEcharts :dir="dir" v-if="currentEcharts == 'today'"></TodayEcharts>
                        <YearEcharts :dir="dir" v-if="currentEcharts == 'year'"></YearEcharts>
                    </div>
                </div>
                <div class="aTable">
                    <div class="aTableHeader">
                        <label>荷园-107电表</label>
                        <span>
                            <img src="../../assets/images/monitor/info.png" />
                            <img src="../../assets/images/monitor/open.png" />
                        </span>
                    </div>
                    <div class="aTableMain">
                        <div class="aTableItem">
                            <label>1</label>
                            <label>0</label>
                            <label>0</label>
                            <label>0</label>
                            <label>0</label>
                            <label>0</label>
                            <span></span>
                            <label>0</label>
                            <label>0</label>
                            <font>kWh</font>
                        </div>
                        <div class="aTableContent">
                            <div class="aTableContentHalf">
                                <label>电压：</label>
                                <span>0.00 V</span>
                            </div>
                            <div class="aTableContentHalf">
                                <label>功率因素：</label>
                                <span></span>
                            </div>
                            <div class="aTableContentHalf">
                                <label>电流：</label>
                                <span>0.00 A</span>
                            </div>
                            <div class="aTableContentHalf">
                                <label>有功功率：</label>
                                <span>0.00 kW</span>
                            </div>
                        </div>
                    </div>
                    <div class="aTableTip">
                        <span>
                            <img src="../../assets/images/monitor/grayTip.png" />
                            <label>欠费</label>
                        </span>
                        <span>
                            <!-- tip.png 现在不用，没这些状态 -->
                            <img src="../../assets/images/monitor/grayTip.png" />
                            <label>负载跳电</label>
                        </span>
                        <span>
                            <img src="../../assets/images/monitor/grayTip.png" />
                            <label>恶性负载跳电</label>
                        </span>
                    </div>
                </div>
            </div>
            <div class="userInfo">
                <navigation-bar customTitle="账户信息"> </navigation-bar>
                <div class="userContent">
                    <div class="userItem">
                        <label>户名：</label>
                        <span>荷园-107</span>
                    </div>
                    <div class="userItem">
                        <label>所属身份：</label>
                        <span>学生</span>
                    </div>
                    <div class="userItem">
                        <label>定价方案：</label>
                        <span>学生</span>
                    </div>
                    <div class="userItem">
                        <label>联系方式：</label>
                        <span>14732473205</span>
                    </div>
                    <div class="userItem">
                        <label>基本账户：</label>
                        <span>15.98元</span>
                    </div>
                    <div class="userItem">
                        <label>补助账户：</label>
                        <span>0.00元</span>
                    </div>
                    <div class="userItem">
                        <label>余额</label>
                        <span>15.98元</span>
                    </div>
                    <div class="userItem">
                        <label>告警阈值</label>
                        <span>0.00元</span>
                    </div>
                    <div class="userItem">
                        <label>总功率阈值</label>
                        <span></span>
                    </div>
                </div>
            </div>

            <div class="deviceInfo">
                <navigation-bar customTitle="设备信息"> </navigation-bar>
                <el-table :data="tableData" style="width: 100%" size="small" border>
                    <el-table-column prop="type" label="设备类型" width="180"> </el-table-column>
                    <el-table-column prop="no" label="设备序号" width="180"> </el-table-column>
                    <el-table-column prop="number" label="实时读数"> </el-table-column>
                    <el-table-column prop="td" label="网关通道"> </el-table-column>
                    <el-table-column prop="xh" label="网关信号">
                        <template slot-scope="scope">
                            <img :src="getWgxhImg(scope.row.xh)" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="运行状态">
                        <template slot-scope="scope">
                            <label :class="getStatusClass(scope.row.status)"></label>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="inInfo">
                <navigation-bar customTitle="缴退费入口"> </navigation-bar>
                <div class="inInfoMain">
                    <div class="left">
                        <div class="p33">
                            <label class="p33Label">缴费金额：</label>
                            <el-input size="medium" placeholder="请输入" type="text" class="inputOrSelect">
                                <label slot="suffix">元</label>
                            </el-input>
                        </div>
                        <div class="p33">
                            <label class="p33Label">缴费方式：</label>
                            <el-select v-model="valueCommon" placeholder="请选择" class="inputOrSelect" size="medium">
                                <el-option v-for="item in optionsCommon" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="p33">
                            <label class="p33Label">退费金额：</label>
                            <el-input size="medium" placeholder="请输入" type="text" class="inputOrSelect">
                                <label slot="suffix">元</label>
                            </el-input>
                        </div>
                        <div class="p33">
                            <label class="p33Label">退费方式：</label>
                            <el-select v-model="valueCommon" placeholder="请选择" class="inputOrSelect" size="medium">
                                <el-option v-for="item in optionsCommon" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="p33">
                            <label class="p33Label">联系方式：</label>
                            <el-input size="medium" placeholder="请输入" type="text" class="inputOrSelect"> </el-input>
                        </div>
                        <div class="p33">
                            <label class="p33Label">费用类型：</label>
                            <el-select v-model="valueCommon" placeholder="请选择" class="inputOrSelect" size="medium">
                                <el-option v-for="item in optionsCommon" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="p33">
                            <label class="p33Label">操作员：</label>
                            <el-input size="medium" placeholder="请输入" type="text" class="inputOrSelect"> </el-input>
                        </div>
                        <div class="p66" style="width: 100%; clear: both; height: 60px">
                            <label class="p33Label">备注：</label>
                            <el-input size="medium" placeholder="请输入" type="textarea" class="inputOrSelect" style="width: 330px">
                            </el-input>
                        </div>
                        <div class="p66">
                            <el-button size="medium" type="primary">立即缴费</el-button>
                            <el-button size="medium" type="primary">立即退费</el-button>
                        </div>
                    </div>
                    <div class="right">
                        <el-table :data="bottomTableData" style="width: 100%" size="small" border height="400">
                            <el-table-column prop="dh" label="缴费单号"> </el-table-column>
                            <el-table-column prop="ly" label="缴费来源"> </el-table-column>
                            <el-table-column prop="type" label="缴费类型"> </el-table-column>
                            <el-table-column prop="jfje" label="缴费金额"> </el-table-column>
                            <el-table-column prop="zhye" label="账户余额">
                                <!-- <template slot-scope="scope">
								<img :src="getWgxhImg(scope.row.xh)" />
							</template> -->
                            </el-table-column>
                            <el-table-column prop="bz" label="备注">
                                <!-- <template slot-scope="scope">
								<label :class="getStatusClass(scope.row.status)"></label>
							</template> -->
                            </el-table-column>
                            <el-table-column prop="jfsj" label="操作时间"> </el-table-column>
                            <el-table-column prop="id" label="操作">
                                <template slot-scope="scope">
                                    <a href="javascript:void(0)" @click="getPj(scope.row.id)">补打票据</a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import HourEcharts from './echarts/electricityMeterEcharts/hourEcharts'
import MonthEcharts from './echarts/electricityMeterEcharts/monthEcharts.vue'
import TodayEcharts from './echarts/electricityMeterEcharts/todayEcharts.vue'
import YearEcharts from './echarts/electricityMeterEcharts/yearEcharts.vue'
import {moniterTable, moniterBottomTable} from '@/mockData/monitorCenter.js'
import navigationBar from '@/components/customComponents/managementCenter/navigationBarCustomTitle'
export default {
    name: 'electricityMeter',
    props: ['dir'],
    components: {HourEcharts, MonthEcharts, TodayEcharts, YearEcharts, navigationBar},
    data() {
        return {
            bottomTableData: moniterBottomTable,
            tableData: moniterTable,
            /** echarts的类型，hour,today,month,year*/
            currentEcharts: 'month',
            options: [
                {
                    value: '1',
                    label: '电能'
                },
                {
                    value: '2',
                    label: '电能1'
                }
            ],
            value: '1',
            optionsCommon: [
                {
                    value: '1',
                    label: '参数1'
                },
                {
                    value: '2',
                    label: '参数2'
                }
            ],
            valueCommon: '1'
        }
    },
    computed: {},
    created() {},
    methods: {
        back() {
            this.$emit('back', 'elec')
        },
        getWgxhImg(xh) {
            return xh == 1
                ? require('../../assets/images/monitor/info3.png')
                : xh == 2
                ? require('../../assets/images/monitor/info2.png')
                : xh == 3
                ? require('../../assets/images/monitor/info1.png')
                : xh == 4
                ? require('../../assets/images/monitor/info.png')
                : require('../../assets/images/monitor/info4.png')
        },
        getStatusClass(status) {
            return status == 1 ? 'status normal' : 'status unNormal'
        },
        echartBtnClick(btnName) {
            this.currentEcharts = btnName
        }
    }
}
</script>

<style scoped>
.main {
    height: calc(100vh - 160px);
    overflow-y: auto;
}
.main::-webkit-scrollbar {
    width: 0px;
}
.main::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 0px;
}
.left {
    background-color: #f5f5f5;
    padding: 10px 15px;
}
.left .p33 {
    width: 33%;
    float: left;
    height: 35px;
    line-height: 35px;
    text-align: left;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.left .p66 {
    width: 66%;
    float: left;
    height: 35px;
    line-height: 35px;
    text-align: left;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.left .p33 .p33Label,
.left .p66 .p33Label {
    color: #666;
    font-size: 14px;
    min-width: 75px;
    display: inline-block;
    vertical-align: middle;
}
.inputOrSelect {
    width: 120px;
}
.inInfo {
    margin-top: 20px;
}
.inInfo .inInfoMain {
    width: 100%;
    display: flex;
}
.inInfo .inInfoMain .right {
    width: 700px;
    text-align: right;
}
.inInfo .inInfoMain .left {
    flex: 1;
    text-align: left;
    margin-right: 10px;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.status {
    width: 5px;
    height: 5px;
    border-radius: 5px;
    display: inline-block;
}
.normal {
    background-color: #00ffa9;
}
.unNormal {
    background-color: #999;
}
.deviceInfo {
    margin-top: 10px;
    clear: both;
}
.userInfo {
    /* height: 130px; */
    padding: 0 10px;
}
.userInfo .userContent {
    font-size: 14px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.userInfo .userContent .userItem {
    width: calc((100% - 30px) / 3);
    line-height: 30px;
}
.userInfo .userContent .userItem label {
    color: #999;
    min-width: 100px;
    display: inline-block;
}
.userInfo .userContent .userItem span {
    font-size: 14px;
}
.rightContent {
    height: calc(100vh - 123px);
    flex: none;
    text-align: left;
    padding-top: 2px;
    position: absolute;
    left: 260px;
}
.back {
    height: 28px;
    line-height: 28px;
    text-align: left;
    padding-left: 10px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}
.back img {
    float: left;
    display: block;
    cursor: pointer;
    margin-right: 5px;
    margin-top: 4px;
}
.back label {
    cursor: pointer;
}
.analysis {
    display: flex;
    position: relative;
    padding: 10px;
}

.analysis .aEcharts {
    flex: 1;
}

.analysis .aTable {
    width: 360px;
    background-color: #e6edfd;
    height: 306px;
    padding: 10px 20px;
    border-radius: 4px;
    margin-left: 10px;
}
.mb10 {
    margin-bottom: 10px;
    font-size: 16px;
}

.analysis .aTable .aTableHeader {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    display: flex;
}
.analysis .aTable .aTableHeader label {
    font-size: 18px;
    font-weight: bold;
}
.analysis .aTable .aTableHeader span {
    font-size: 12px;
    text-align: right;
    flex: 1;
}
.analysis .aTable .aTableHeader span img {
    margin-left: 10px;
}

.analysis .aTable .aTableMain {
    font-size: 14px;
    background-color: #80c8a7;
    border-radius: 4px;
    padding: 50px 15px;
    height: 100px;
    margin-top: 20px;
}
.analysis .aTable .aTableMain .aTableItem {
    font-size: 20px;
    height: 35px;
    width: 100%;
    margin-bottom: 20px;
}
.analysis .aTable .aTableMain .aTableItem label {
    font-size: 18px;
    background-color: #fff;
    height: 25px;
    display: block;
    float: left;
    width: 20px;
    margin-right: 5px;
    line-height: 25px;
    text-align: center;
    font-weight: bold;
    border-radius: 2px;
}
.analysis .aTable .aTableMain .aTableItem span {
    background-color: #333;
    height: 5px;
    display: block;
    float: left;
    width: 5px;
    margin-right: 5px;
    border-radius: 5px;
    margin-top: 15px;
}
.analysis .aTable .aTableMain .aTableItem font {
    font-size: 14px;
    color: #fff;
    margin-top: 10px;
    display: block;
    float: left;
    margin-left: 5px;
}

.analysis .aTable .aTableMain .aTableContent {
    font-size: 12px;
}
.analysis .aTable .aTableMain .aTableContent .aTableContentHalf {
    width: 50%;
    float: left;
    height: 30px;
    line-height: 30px;
    color: #fff;
}
.analysis .aTable .aTableMain .aTableContent .aTableContentHalf label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.analysis .aTable .aTableMain .aTableContent .aTableContentHalf span {
    font-size: 14px;
}

.analysis .aTable .aTableTip {
    margin-top: 15px;
}

.analysis .aTable .aTableTip span {
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    display: inline-block;
    margin-right: 10px;
}

.analysis .aTable .aTableTip span img {
    float: left;
    margin-right: 5px;
}
.analysis .aTable .aTableTip span label {
    font-size: 12px;
}

.bgF5 {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
</style>
